<template>
  <div class="resume_header">
    <span>所有岗位</span>
  </div>
  <div class="resume_center">

    <el-table :data="filterTableData.slice((page - 1) * limit,page*limit)
   " style="width: 100%" height="400px" size="large" >
      <el-table-column label="岗位名称" prop="jobName" width="200px"  />
      <el-table-column label="发布公司" prop="eName" width="200px"/>
      <el-table-column label="工作地址" prop="jobAddress" width="100px"  />
      <el-table-column label="学历要求" prop="jobEdu" width="100px"  />
      <el-table-column label="经验要求" prop="jobEx" width="100px"  />
      <el-table-column label="岗位薪资" prop="jobSalary" width="100px"  />
      <el-table-column label="联系电话" prop="contactPhone"  width="150px" />
      <el-table-column label="状态" width="100px"  >
        <template #default="scope">
          <el-tag :type="scope.row.isPublishing=='true'?'success':'danger'" size="default">{{scope.row.jobState}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="default" placeholder="搜索" width="300px" />
        </template>
        <template #default="scope">
          <el-button size="default" type="danger" @click="handleDelete(scope.$index, scope.row)"
          v-if="scope.row.isPublishing=='true'?true:false"
          >撤销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination :page="page" :limit="limit" :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" :filterTableData="filterTableData" :pagesizes="pagesizes" />
    </div>
  

  </div>
 
</template>
<script lang='ts' setup>


import { ElDrawer, ElMessageBox } from 'element-plus'

import { computed, ref, onMounted, reactive, onBeforeMount } from 'vue'
import {adminGetAllJobs,adminRevokeJob} from "@/api/adminApi"
import { useStore } from "vuex"
import {useRouter} from "vue-router"
import Pagination from "@/components/Pagination.vue"
import { data,elmessage } from '@/hook/hook'
const store = useStore()
const router=useRouter()
// 表格数据定义
interface Jobs {
  jobId: string
  jobName: string
  jobAddress: string,
  jobEdu: string,
  jobEx: string,
  jobSalary: string,
  jobState:string,
  isPublishing:string,
  eName:string,
  eId:string,
  contactPhone:string

}
const tableData: Jobs[] = reactive([])

const search = ref('')
const filterTableData = computed(() =>
  
tableData.filter(
    (data,index) =>
      !search.value ||
      // 通过岗位名称筛选
      data.jobName.toLowerCase().includes(search.value.toLowerCase()) ||
      data.eName.toLowerCase().includes(search.value.toLowerCase()) 
      // data.jobName.toLowerCase().indexOf(search.value.toLowerCase()) !== -1 
))

// 撤销在招职位
const handleDelete = (index: number, row: Jobs) => {
  const newData={
    ...data(),
    jobId:row.jobId,
  }
  adminRevokeJob(newData).then((res:any)=>{
    if (res.data["code"] == "200") {
      elmessage(res.data["message"], res.data["type"])
      row.jobState="已被撤销"
      row.isPublishing="false"
      // tableData.splice(index, 1)
    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else {
      console.log(res.data);
    }
  })
  
}

// 分页器
const page = ref(1)
const pagesizes=ref([1,2,3,4,10, 20, 30, 40])
const limit = ref(10)

const handleSizeChange = (val: number) => {
  limit.value=val
  page.value=1
}
const handleCurrentChange = (val: number) => {
  page.value=val
}


// 初始化和过滤表格内容
const pushTableData=()=> {


  const job = store.state.jobState.jobs

  if (tableData.length != 0) {

    tableData.forEach((value, index, self) => {
      for (let i = 0; i < job.length; i++) {
        // 给tableData添加新数据
        if (self.findIndex(item => item.jobId == job[i].jobId) == -1) {
          tableData.push(job[i])
        
        } 
      }
    })


  } else {
    for (let i = 0; i < job.length; i++) {
      tableData.push(job[i])
    }
  }
}



const init=()=>{
  adminGetAllJobs(data()).then((res:any)=>{
    if (res.data["code"] == "200") {
      res.data.datas.forEach((value: any, index: any, self: any) => {
        tableData.push(value)
      })
    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else {
      console.log(res.data);

    }
  })
}


onBeforeMount(() => {
  // pushTableData()
  init()
 

})


</script>
<style scoped>
.pagination{
  float: right;
  margin-right: 50px;
  /* right: 150px; */
}
.jobName_tag {
  background-color: #FFF;
  color: #000;
  border-width: 0;
}

.table_colum:hover .jobName_tag {
  background-color: #F5F7FA
}

.addJob_btn {
  margin-right: 100px;
}

.resume_center {
  font-family: '微软雅黑';
  height: 800px;
  background-color: #FFF;
}

.resume_header {
  background-color: rgb(215, 215, 215);
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  justify-content: space-between;
}

a {
  text-decoration: none;
  color: #000;
}
</style>